<template>
  <div class="edit-popup">
    <popup
            ref="popupRef"
            :title="'添加直播间'"
            :async="true"
            width="700px"
            @confirm="handleSubmit"
            @close="handleClose"
    >
      <el-form
              class="your-form-class"
              label-width="150px"
              ref="formRef"
              :model="formData"
              :rules="rulesContent"
      >
        <el-form-item label="频道名称/ID" prop="channel_id">
<!--          <el-input v-model="formData.channel_id" placeholder="请输入频道ID"   class="max-w-[300px]"/>-->
          <el-select v-model="formData.channel_id" placeholder="全部">
              <template v-for="i in channelListMzList">
                  <el-option :label="`${i.name} / ${i.channel_id}`" :value="i.channel_id"/>
              </template>
          </el-select>
        </el-form-item>
        <el-form-item label="直播间名称" prop="name" >
          <el-input v-model="formData.name" placeholder="请输入直播间名称"   class="max-w-[300px]"/>
        </el-form-item>
        <el-form-item label="直播间封面" prop="cover" >
          <div style="display: flex; flex-direction: column; gap: 10px">
            <el-image v-if="formData.cover" style="width: 100px; height: 100px" :src="formData.cover" />
            <upload
                    class="mr-3"
                    :type="'image'"
                    :show-progress="true"
                    @change="actionImg"
                    ref="myref"
            >
              <el-button type="primary">本地上传</el-button>
            </upload>
          </div>
        </el-form-item>
        <el-form-item label="开播时间" prop="start_time" >
          <el-date-picker
                  v-model="formData.start_time"
                  type="datetime"
                  placeholder="请选择开播时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="直播形式" prop="is_record_mode" >
          <el-radio-group v-model="formData.is_record_mode">
            <el-radio :label="0">正常直播</el-radio>
            <el-radio :label="1">录播</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.is_record_mode == 1" label="选择录播视频" prop="coupon_id">
          <el-select placeholder="无" v-model="formData.record_mode_video_id">
            <el-option
                    v-for="item in videoList"
                    :label="item.record_mode_video_name"
                    :value="item.record_mode_video_id"
                    :key="item.record_mode_video_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="直播样式" prop="live_style" >
          <el-radio-group v-model="formData.live_style">
            <el-radio :label="0">横屏</el-radio>
            <el-radio :label="1">竖屏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否生成回放" prop="auto_record">
          <el-radio-group v-model="formData.auto_record">
            <el-radio :label="0">不生成</el-radio>
            <el-radio :label="1">生成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主播间描述" prop="introduction">
          <el-input class="w-[400px]" v-model="formData.introduction" type="textarea"  :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入主播间描述" />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
  import type { FormInstance } from "element-plus";
  import { addRoomMz, getVideoList } from '@/api/live'
  import { getChannelListMz } from '@/api/live'
  import Popup from "@/components/popup/index.vue";
  import { rulesContent } from "./data"
  const emit = defineEmits(["success", "close"]);
  const formRef = shallowRef<FormInstance>();
  const popupRef = shallowRef<InstanceType<typeof Popup>>();
  const myref = ref(null)


  interface TsObj {
    room_id: string,
    channel_id: string,
    name: string,
    cover: string,
    start_time: string,
    live_style: number,
    auto_record: number,
    introduction: string,
  }

  const formData:TsObj = reactive({
    room_id: '',
    channel_id: '',
    name: '',
    cover: '',
    start_time: '',
    live_style: 1,
    auto_record: 0,
    introduction: '',
    record_mode_video_id: 0,
    is_record_mode: 0 // 是否录播【0：否|1：是】
  });


  const videoList = ref([]);
  getVideoList({
    page: 1,
    limit: 9999999
  }).then(res => {
    videoList.value = [{
      record_mode_video_id: 0,
      record_mode_video_name: '暂无选择视频'
    }, ...res.list]
  });

  const open = () => {
    popupRef.value?.open();
  };

  const setFormData = (data: Record<any, any>) => {
  };

  const getDetail = async (row: Record<string, any>) => {
  };

  const handleClose = () => {
    emit("close");
  };

  // 照片更新
  const actionImg = async () => {
    formData.cover = myref.value.fileList[0].response.data.url;
  };

  const handleSubmit = async () => {
    await formRef.value?.validate();
    await addRoomMz(formData);
    popupRef.value?.close();
    emit('success')
  };


  // 频道
  const channelListMzList = ref([]);
  getChannelListMz({
      limit: 999
  }).then(res => {
      channelListMzList.value = res.list
  });


  defineExpose({
    open,
    setFormData,
    getDetail,
  });



</script>


<style type="text/css" scoped>
  /*.your-form-class :disabled {*/
  /*  color: black; !* 这是一个示例颜色，你可以根据需要更改 *!*/
  /*}*/
</style>
